enlarge images dynamically

revision: April 25, 2025

mouse over pictures to enlarge

code:
            <div id="example_1" class="grid_B">
                <img id="myImage1" src="../images/1.jpg" alt="picture" title="photo" alt="Sample Image" 
                style="width: 300px; cursor: pointer;">
                <img src="../images/2.jpg" alt="picture" title="photo" class="one" alt="picture" title="photo"/>
                <img src="../images/3.jpg" alt="picture" title="photo" class="two" alt="picture" title="photo"/>
                <img src="../images/4.jpg" alt="picture" title="photo" class="one" alt="picture" title="photo"/>
                <img src="../images/5.jpg" alt="picture" title="photo" class="two" alt="picture" title="photo"/>
                <img src="../images/6.jpg" alt="picture" title="photo" class="one" alt="picture" title="photo"/>
            </div>
            <style>
                #example_1 img{width: 10vw; height: 10vw; margin-inline: 1vw;}
                .zoomed {transform: scale(1.2); transition: transform 0.25s ease; }
                #example_1 .one:hover { height: 12vw; width: 12vw;}
                #example_1 .two:hover{ transform:scale(0.5);}
            </style>
            <script>
                document.getElementById('myImage1').addEventListener('mouseover', function() {
                    this.classList.toggle('zoomed')});
            </script>

multiple photos to enlarge and shrink

code: 
            <div id="example_2" class="grid_B">
                <img src="../images/1.jpg" alt="picture" title="photo"/>
                <img src="../images/2.jpg" alt="picture" title="photo"/>
                <img src="../images/3.jpg" alt="picture" title="photo"/>
                <img src="../images/4.jpg" alt="picture" title="photo"/>
                <img src="../images/5.jpg" alt="picture" title="photo"/>
            </div>
            <style>
                #example_2 img {height: 200px;  width: 200px; margin: 10px;}
                #example_2 img:hover{height: 400px; width: 400px; }
            </style>

click to enlarge photos

            <div id="example_3" class="grid_B">
                <img src="../images/5.jpg" alt="picture" title="photo" height="200px" width="200px"/>
               <img src="../images/6.jpg" alt="picture" title="photo" height="200px" width="200px"/>
               <img src="../images/7.jpg" alt="picture" title="photo" height="200px" width="200px"/>
               <img src="../images/8.jpg" alt="picture" title="photo" height="200px" width="200px"/>
               <img src="../images/9.jpg" alt="picture" title="photo" height="200px" width="200px"/>
           </div>
           <script>
               var images_a = document.getElementsByTagName('img');
               for (var i = 0; i < images_a.length; i++) {
                   images_a[i].addEventListener('click', function() {
                       for (var j = 0; j < images_a.length; j++) {
                           if (i != j) {
                               images_a[j].style.transform = 'scale(1)';
                           }
                       }   
                       this.style.transform = 'scale(1.3)';
                       this.style.margin = '40px'
                   });
               } 
           </script>

move mouse over and click to enlarge the picture

code:
        <div id="example_4">
            <div id="image-container">
                <img src="../images/10.jpg" alt="picture" title="photo" alt="Shanghai" width="25%" height="auto"/>
            </div>
        </div>
        <style>
            #image-container { position: relative; margin-inline: 2vw; margin-block: 5vw;}
            #image-container img {display: block; max-width: 100%;}
            #image-container:hover img { transform: scale(1.2); transition: transform 0.4s ease-in-out;}
        </style>
        <script>
            var imgContainer = document.getElementById('image-container');
            var img = imgContainer.getElementsByTagName('img')[0];
    
            img.addEventListener('click', function() {
                var enlargedImg = document.createElement('img');
                enlargedImg.src = img.src;
                enlargedImg.style.position = 'absolute';
                enlargedImg.style.top = 0;
                enlargedImg.style.left = 0;
                enlargedImg.style.width = '50%';
                imgContainer.appendChild(enlargedImg);
            });
        </script>

multiple photos to click to enlarge

holiday 1

holiday 2

holiday 3

holiday 4

holiday 5

holiday 6

        <main>
            <div image-wrapper>
                <img src="../images/1a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable>
                <div caption><p>holiday 1</p></div>
            </div>
            <div image-wrapper>
                <img src="../images/2a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable> 
                <div caption><p>holiday 2</p></div>
            </div>
            <div image-wrapper>
                <img src="../images/3a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable> 
                <div caption><p>holiday 3</p></div>
            </div>
            <div image-wrapper>
                <img src="../images/4a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable> 
                <div caption><p>holiday 4</p></div>
            </div>
            <div image-wrapper>
                <img src="../images/5a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable> 
                <div caption><p>holiday 5</p></div>
            </div>
            <div image-wrapper>
                <img src="../images/6a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable> 
                <div caption><p>holiday 6</p></div>
            </div>
        </main>
        <style>
            main {width: 1600px; height:400px;  padding: 1px;  gap: 20px; display: flex;  flex-direction: row;  flex-wrap: nowrap; justify-content: center;}
            /*This is a more detailed style for just the immage wrappers*/
            [image-wrapper] {display: flex;  flex-direction: column;  gap: 15px; padding: 5px;  width: 200px;  height: 300px; background: #fff;  
                border-radius: 20px 20px 20px 20px; overflow: hidden; box-shadow: 0 3px 15px hsl(0, 0%, 0%, 0.35); justify-content: center;  }
            /*This is a more detailed style for all the images within the image wrappers*/
            [image-wrapper] img { border-radius: 10px 10px 10px 10px; justify-content: center; cursor:zoom-in;}
            /*This is a style for the caption in the image wrapper in general*/
            [caption] {display: boarder;  padding: 5px; text-align: center; width:180px; background: #add8e6; color: blue;  border-radius: 20px 20px; }
            /*This is a style of how I want the caption to look like in the image wrapper*/
            [image-wrapper] [caption] {text-align:center; }
        </style>
        <script>
            //the `constant` is started and stated
            const imageWrappers = document.querySelectorAll('[image-wrapper]');
            //a function to show the image sources that are previewable
            function showPreview(imgSrc) {
                const previewImg = document.createElement('img');
                const overlay = document.createElement('div');
                //the method that states that `imgSrc` from earlier is supposed to use the image sorces given 
                previewImg.setAttribute('src', imgSrc);
                //how to style the image so that it looks like after it's enlarged
                previewImg.style.position = 'fixed';
                previewImg.style.left = '50%';
                previewImg.style.top = '50%';
                previewImg.style.transform = 'translate(-50%, -50%)';
                previewImg.style.maxWidth = '90%';
                previewImg.style.maxHeight = '80%';
                previewImg.style.zIndex = '9999';
                //the overlay that will give the background a bit of a blur once an image is enlarged and how the blur will look like
                overlay.style.position = 'fixed';
                overlay.style.left = '0';
                overlay.style.top = '0';
                overlay.style.width = '100%';
                overlay.style.height = '100%';
                overlay.style.background = 'rgba(0, 0, 0, 0.5)'; 
                //a new element is created or stored
                document.body.appendChild(previewImg);
                document.body.appendChild(overlay);
                //a method that uses `EventListner`so that everytime the image is clicked, it will close 
                overlay.addEventListener('click', closePreview);
                //a function to remove the new element after any click from the previous line
                function closePreview() {
                    document.body.removeChild(overlay);
                    document.body.removeChild(previewImg);
                    //a method that uses `EventListner`so that everytime anywhere is clicked, the enlarged image will disappear or go back to normal
                    overlay.removeEventListener('click', closePreview);
                }
            }
            //a method that is used to apply/trigger the functions given before that enlarges and removes the enlarged image  
            imageWrappers.forEach(imageWrapper => {
                imageWrapper.addEventListener('click', (event) => {
                    const img = imageWrapper.querySelector('img');
                    showPreview(img.getAttribute('src'));
                });
            });
        </script>

enlage picture on hover

code:
        <div class="images-container">
            <img src="../images/10a.jpg" alt="picture" title="photo" alt="Sample Image" class="hover-image">
        </div>
        <style>
            .images-container {display: inline-block; overflow: hidden; margin-inline: 5vw;}
            .hover-image { width: 300px;  height: auto; transition: transform 0.3s ease;}
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const image = document.querySelector('.hover-image');
                image.addEventListener('mouseover', () => {
                    image.style.transform = 'scale(1.5)';
                });
                image.addEventListener('mouseout', () => {
                    image.style.transform = 'scale(1)';
                });
            });
        </script>

click pictures to enlarge, use button to reduce

        <div>
            <div class="containerForImage">
                <img src="../images/5.jpg" alt="picture" title="photo" id="imgThree" onclick="enlargeImg_A()"/>
                <img src="../images/7.jpg" alt="picture" title="photo" id="imgFour" onclick="enlargeImg_B()"/>
            </div>
            <button onclick="resetImg_A()">A</button>
            <button onclick="resetImg_B()">B</button>
        </div>
        <style>
            #example_7 img{width: 20vw; height: 12vw;margin-left: 2vw;}
            button{width: 4vw; height: 2vw; background-color: lightgreen; margin-left: 12vw; margin-top: 5vw;}
        </style>
        <script>
            img_A = document.getElementById("imgThree");
            function enlargeImg_A() {
                img_A.style.transform = "scale(1.5)";
                img_A.style.transition = "transform 0.25s ease";
            }
            function resetImg_A(){
            img_A.style.transform = "scale(1)";
            img_A.style.transition = "transform 0.25s ease";
            }
    
            img_B = document.getElementById("imgFour");
            function enlargeImg_B() {
                img_B.style.width = "50%";
                img_B.style.height = "15vw";
                img_B.style.transition = "width 0.5s ease";
            }
            function resetImg_B() {
                img_B.style.width = "20vw";
                img_B.style.height = "12vw";
                img_B.style.transition = "width 0.5s ease";
            }
        </script>

enlarge and scroll images using CSS and JavaScript

code:
        div class="imageContainer">
            <img id="thisImage" src="../images/1.jpg" alt="Scrollable and Enlargeable Picture" width="600" 
            height="400"/>
        </div>
        <style>
            .imageContainer {overflow: scroll; width: 80%; height: auto; border: 2px solid #ccc; position: relative;}
            #thisImage {transition: transform 0.25s ease;}
        </style>
        <script>
            const firstPhoto = document.getElementById('thisImage');
            let scale_A = 1;
            firstPhoto.addEventListener('wheel', (event) => {
                event.preventDefault();
                if (event.deltaY < 0) {
                    scale_A *= 1.1;
                } else {
                    scale_A /= 1.1;
                }
                firstPhoto.style.transform = `scale(${scale_A})`;
            });
        </script>

enlarge and scroll images using CSS

code:
            <div class="imageContainer2">
                <img id="anotherImage" src="../images/1.jpg" alt="Sample Image" class="scrolling-image">
            </div>
            <style>
            .imageContainer2 {width: 50vw; height: 50vh;  overflow: hidden;  position: relative; }
            .scrolling-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  
                animation: enlargeAndScroll 10s linear infinite; }
            /* Keyframes for enlarging and scrolling */
                @keyframes enlargeAndScroll {
                0% {transform: translate(-50%, -50%) scale(1); }
                100% {  transform: translate(-50%, -150%) scale(2); /* Adjust scale and translation as needed */}
                }
            </style>

enlarge and scroll images using JavaScript

code:
            <div class="imageContainer2">
                <img src="../images/1.jpg" alt="Sample Image" class="scrolling-image1" id="anotherImage1">
            </div>
            <style>
                .imageContainer2 { width: 50vw; height: 50vh; overflow: hidden; position: relative; }
                .scrolling-image1 { position: absolute; top: 50%; left: 50%; transform: translate(-10%, -10%); 
                    transition: transform 50s linear; /* Smooth transitions */}
            </style>
            <script>
                const image1 = document.getElementById('anotherImage1');
                let scale1 = 1; // Initial scale
                let translateY = 0; // Initial vertical translation
    
                function animateImage() {
                    scale1 += 0.005; // Gradually increase the scale
                    translateY -= 1; // Gradually move the image upward
    
                    // Apply transformations
                    image1.style.transform = `translate(-50%, ${translateY}%) scale(${scale1})`;
    
                    // Loop the animation
                    requestAnimationFrame(animateImage);
                }
    
                // Start the animation
                animateImage();
            </script>

enlarge picture by clicking it

code:
            <div>
                <h3>enlarge picture by clicking it</h3>
                <div>
                    <!-- Trigger the Modal -->
                    <img id="myPhoto" src="../images/12.jpg" alt="Shanghai" style="width:100%;max-width:300px">
                    <!-- The Modal -->
                    <div id="myModal" class="modal">
                    <!-- The Close Button -->
                        <span class="close">×</span>
                        <!-- Modal Content (The Image) -->
                        <img class="modal-content" id="img01">
                        <!-- Modal Caption (Image Text) -->
                        <div id="caption"></div>
                    </div>
                </div>
            </div>
            <style>
                /* Style the Image Used to Trigger the Modal */
                #myPhoto {border-radius: 5px; cursor: pointer; transition: 0.3s; }
                #myPhoto:hover {opacity: 0.2;}
                /* The Modal (background) */
                .modal {display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; 
                    height: 100%; overflow: auto; /* Enable scroll if needed */
                background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); }
                /* Modal Content (Image) */
                .modal-content {margin: auto; display: block; width: 80%; max-width: 700px;}
                /* Caption of Modal Image (Image Text) - Same Width as the Image */
                #caption { margin: auto; display: block; width: 80%;  max-width: 700px; text-align: center; 
                    padding: 10px 0; height: 150px;}
                /* Add Animation - Zoom in the Modal */
                .modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; }
                @keyframes zoom {
                    from {transform:scale(0)}
                    to {transform:scale(1)}
                }
                /* The Close Button */
                .close {position: absolute; top: 15px;  right: 35px;  color: red; font-size: 48px; font-weight: bold; 
                    transition: 0.3s;}
                .close:hover, .close:focus {color: #bbb; text-decoration: none; cursor: pointer; }
                /* 100% Image Width on Smaller Screens */
                @media only screen and (max-width: 700px){
                    .modal-content { width: 100%; }
                }
            </style>
            <script>
                // Get the modal
                var modal = document.getElementById("myModal");
    
                // Get the image and insert it inside the modal - use its "alt" text as a caption
                var img_a = document.getElementById("myPhoto");
                var modalImg = document.getElementById("img01");
                var captionText = document.getElementById("caption");
                img_a.onclick = function(){
                    modal.style.display = "block";
                    modalImg.src = this.src;
                    captionText.innerHTML = this.alt;
                }
                // Get the <span> element that closes the modal
                var span = document.getElementsByClassName("close")[0];
    
                // When the user clicks on <span> (x), close the modal
                span.onclick = function() {
                    modal.style.display = "none";
                }
            </script>